<script lang="ts" setup>
import { ref, watch } from 'vue'

interface IProps {
	value?: string;
	placeholder?: string;
	width?: number | string;
}

const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<IProps>(), {
	width: 200,
	value: undefined
})
const val = ref<string | undefined>()

watch(() => props.value, () => {
	val.value = props.value
})

function onSearchClear() {
	emit('update:value', '')
}

function onSearch() {
	emit('update:value', val.value)
}
</script>

<template>
	<n-input-group :style="{width: width + 'px'}">
		<n-input
			v-model:value="val"
			clearable
			:placeholder="placeholder"
			@clear="onSearchClear"
			@keyup.enter="onSearch"
		/>
		<n-button ghost type="default" @click="onSearch">搜索</n-button>
	</n-input-group>
</template>

<style lang="less" scoped>
</style>
